<template>  
  <div>  
    <h2>购物车</h2>  
    <div v-if="cartItems.length > 0">  
      <div v-for="item in cartItems" :key="item.id">  
        <h3>{{ item.name }} - {{ item.quantity }} x {{ item.price }} 元 = {{ item.quantity * item.price }} 元</h3>  
      </div>  
      <h2>总价: {{ total }}</h2>  
    </div>  
    <div v-else>  
      <p>购物车为空</p>  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  computed: {  
    cartItems() {  
      return this.$store.state.cart;  
    },  
    total() {  
      return this.$store.getters.cartTotal;  
    },  
  },  
  // 在这个简单的例子中，我们不需要 methods，因为我们只从 Vuex store 中读取数据  
};  
</script>  
  
<style scoped>  
/* 你可以在这里添加你的样式 */  
</style>